<template>
  <div class="posts">
    <div class="left">
      <button
        :class="{ active: curTab === 'HelloA' }"
        @click="curTab = 'HelloA'"
      >
        HelloA
      </button>
      <button
        :class="{ active: curTab === 'HelloB' }"
        @click="curTab = 'HelloB'"
      >
        HelloB
      </button>
      <button
        :class="{ active: curTab === 'HelloC' }"
        @click="curTab = 'HelloC'"
      >
        HelloC
      </button>
    </div>

    <div class="right">
      <component :is="curTab"></component>
    </div>
  </div>
</template>

<script>
import HelloA from "./HelloA.vue";
import HelloB from "./HelloB.vue";
import HelloC from "./HelloC.vue";

export default {
  components: {
    HelloA,
    HelloB,
    HelloC,
  },

  data() {
    return {
      curTab: "HelloA",
      // 此处 timer 不要事先定义在 data 中 。
      // 因为，vue 会对 data 中定义的数据做数据代理。但这里的 timer 只是做一个简单的存放，不需要它变化的时候，引起页面更新。
      // timer: null,
    };
  },

  methods: {
    onScroll() {
      console.log("@@@");
    },
  },

  beforeCreate() {
    console.log("beforeCreate");
  },

  created() {
    console.log("created");
  },

  beforeMount() {
    console.log("beforeMount");
  },

  mounted() {
    console.log("mounted");

    // // 定时
    // this.timer = setInterval(() => {
    //   console.log("###");
    // }, 500);

    // // 全局滚动条的监听
    // window.addEventListener("scroll", this.onScroll);

    // 观察 timer 写在 data 中或 不写 有什么不同
    // console.log(this);
  },

  beforeUpdate() {
    console.log("beforeUpdate");
  },

  updated() {
    console.log("updated");
  },

  beforeDestroy() {
    console.log("beforeDestroy");

    // 收尾
    clearInterval(this.timer);

    window.removeEventListener("scroll", this.onScroll);
  },

  destroyed() {
    console.log("destroyed");
  },

  // 失活
  deactivated() {
    console.log("失活");
    // 收尾
    clearInterval(this.timer);
    window.removeEventListener("scroll", this.onScroll);
  },

  // 激活
  activated() {
    console.log("激活");

    // 定时
    this.timer = setInterval(() => {
      console.log("###");
    }, 500);

    // 全局滚动条的监听
    window.addEventListener("scroll", this.onScroll);
  },
};
</script>

<style scoped>
.posts {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
  width: 50px;
}

.right {
  flex: 1;
}
</style>
